<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
	<link rel="stylesheet" href="../css/modal_style.css">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/jquery.searchableSelect.css">
    <script src="../js/jquery-1.11.0.min.js"></script> 
    <script src="../js/config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
	<script src="../js/pintuer.js"></script>
	<script src="../js/jquery.searchableSelect.js"></script>
	<script>
		$(function(){
			$('#addRole').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
			
			$("#roleCode").click(function(){
				$("#roleCodeAlert").css("visibility","hidden");
			});
			$("#rolename").click(function(){
				$("#rolenameAlert").css("visibility","hidden");
			});
		});
		
		//添加角色
		function addRole(){
			var ok1=false;
			var ok2=false;
			
			var roleCode = $("#roleCode").val();
			if(roleCode!=""){
				ok1 = true;
			}else{
				$("#roleCodeAlert").css("visibility","");
			}
			var rolename = $("#rolename").val();
			if(rolename!=""){
				ok2 = true;
			}else{
				$("#rolenameAlert").css("visibility","");
			}
			var remark = $("#remark").val();
			if(ok1 && ok2){
				$.ajax({
				 url:serviceConfig.role.addRole,
				 type: "get",
		         data:{
		         	roleCode:roleCode,
		         	roleName:rolename,
		         	remark:remark
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == 1){
		        	 	alert("添加成功");
		        	 	window.location.reload();//刷新当前页面.
		        	 }else if(data.flag == 0){
		        	 	alert("角色编码已存在");
		        	 	$("#roleCode").val("");
						$("#rolename").val("");
						$("#remark").val("");
		        	 }else if(data.flag == 2){
		        	 	alert("角色名称已存在");
		        	 	$("#roleCode").val("");
						$("#rolename").val("");
						$("#remark").val("");
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
            }
		}
	</script>
</head>

<body>
	<div class="panel admin-panel">
			<div class="panel-head"><strong>添加角色</strong></div>
			<div style="float:left;width:100%;padding-left:30px;padding-top:20px;">
                <div style="float:left;padding-top:5px;"><strong>角色编码：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="roleCode" name="roleCode" placeholder="请填写角色编码"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="roleCodeAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写角色编码！</div>
                </div>
            </div>
			<div style="float:left;width:100%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>角色名称：</strong></div>
                <div style="float:left;">
					<input type="text" style="width:200px;" class="input" id="rolename" name="rolename" placeholder="请填写角色名称"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="rolenameAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写角色名称！</div>
                </div>
            </div>
            <div style="float:left;width:100%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注：</strong></div>
                <div style="float:left;">
					<textarea id="remark" style="width:90%;" class="input" rows="5" cols="50" placeholder="请填写备注" ></textarea>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="remarkAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写备注！</div>
                </div>
            </div>
            <div style="float:left;width:100%;padding-top:20px;padding-left:100px;">
            	<button class="button bg-main" style="width:80px;" id="" onclick="addRole()">确定</button>
            </div>
        </div>
    </div>
</body></html>